<template>
  <div class="new-order">
    <div class="ti">New Order</div>
    <div class="formss">
      <el-table :data="data" height="100%" style="background: transparent">
        <el-table-column
          prop="orderid"
          label="Order Number"
          width="160"
        ></el-table-column>

        <el-table-column label="User" width="200" prop="userid">
        </el-table-column>
        <el-table-column label="Product" width="100" prop="productid">
        </el-table-column>
        <el-table-column prop="allprice" label="Price"></el-table-column>
        <el-table-column
          prop="status"
          label="Order Status"
          width="120"
        ></el-table-column>
        <el-table-column prop="createdAt" label="Time"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import { getorderdata } from "@/api/index";
const data = ref();
onMounted(async () => {
  const rudata = await getorderdata();
  if (rudata.code == 200) {
    data.value = rudata.data;
    console.log(rudata.data);
  }
});
</script>

<style scoped lang="scss">
.col {
  display: flex;
  height: 38px;
  gap: 5px;
  align-items: center;
}
.img {
  height: 1.7vw;
  width: 1.7vw;
  border-radius: 50%;
}
.new-order {
  height: 100%;
  width: 100%;
  padding: 15px 20px;
  .ti {
    height: 30px;
    color: #a6a8ac;
    line-height: 30px;
    margin-bottom: 10px;
    font-size: 0.8vw;
    font-weight: 700;
  }
  .formss {
    height: calc(100% - 30px);
    width: 100%;
    :deep(th) {
      // background-color: var(--them-color) !important;
      background-color: transparent !important;
      border: none !important;
    }
    :deep(.el-table__inner-wrapper) {
      &::before {
        height: 0 !important;
      }
    }
    :deep(.el-table) {
      background-color: transparent !important;
      // color: var(--them-color2) !important;
      color: #fff;
      font-size: 0.65vw;
      font-weight: 700;
    }
    :deep(tr) {
      background-color: transparent !important;
      &:hover td {
        background-color: var(--them-color3) !important;
        color: #fff;
        cursor: pointer;
      }
      &:nth-child(2n) {
        background-color: var(--them-color) !important;
      }
    }
    :deep(td) {
      border: none !important;
    }
  }
}
</style>
